<template>
  <div>
    <div class="branchStoreModel">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i class="el-icon-lx-cascades"></i> 会员积分管理
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="handle-box">
          <!--增加柜台-->
          <el-button
            type="primary"
            size="small"
            class="white addCompany liner"
            @click="handleAdd"
            >添加柜台</el-button
          >
        </div>

        <!--table表格-->
        <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
          style="display: block"
        >
          <el-table-column
            prop="id"
            label="会员ID"
            align="center"
            width="295"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="会员类型"
            align="center"
            width="300"
          ></el-table-column>

          <el-table-column
            prop="score"
            label="会员积分"
            align="center"
            width="300"
          ></el-table-column>

          <el-table-column label="操作" width="220" align="center">
            <template slot-scope="scope">
              <!--编辑按钮-->
              <el-button
                type="text"
                class="green"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >

              <!--删除按钮(非确认删除)-->
              <el-button
                type="text"
                class="red"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!--页码、分页-->
        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageNum"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>
      </div>

      <!-- 添加弹出框 -->
      <el-dialog
        title="添加新增/编辑会员卡"
        :visible.sync="addVisible"
        width="40%"
      >
        <el-form ref="form" :model="addForm" label-width="70px">
          <el-form-item label="会员ID">
            <el-input v-model="addForm.id"></el-input>
          </el-form-item>

          <el-form-item label="会员类型">
            <el-input v-model="addForm.type"></el-input>
          </el-form-item>

          <el-form-item label="会员积分">
            <el-input v-model="addForm.score"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveAdd" class="liner" size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 编辑弹出框 -->
      <el-dialog title="提交" :visible.sync="editVisible" width="40%">
        <el-form ref="form" :model="editForm" label-width="70px">
          <el-form-item label="会员ID">
            <el-input v-model="editForm.id" readonly="readonly"></el-input>
          </el-form-item>

          <el-form-item label="会员类型">
            <el-input v-model="editForm.type"></el-input>
          </el-form-item>

          <el-form-item label="会员积分">
            <el-input v-model="editForm.score"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveEdit" class="liner" size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
var _index;

export default {
  id: "basetable",
  data() {
    return {
      query: {
        store: "",
        waresName: "",
        waresType: 0,
        idx: -1,
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      addVisible: false,
      /*选项框公司总部*/
      optionCompany: "",

      addForm: {},
      editForm: {},
      addLittle: {
        dobusiness: "生效"
      },
      editLittle: {
        dobusiness: "生效"
      },
      editDobusiness: "",
      /*搜索框*/
      search: "",
      searchCondition: {},
      searchList: [],
      pageTotal: 0,
      // form: {},
      idx: -1,
      id: -1
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.$axios
        .get(
          // "http://172.16.6.136:8080/gold/vipType/findAll",
          this.$api.cardManage.cardManagefindAll,
          this.query
        )
        .then(res => {
          console.log(res.data.data.list);
          console.log(res.data.data);
          console.log(this.tableData);
          this.tableData = res.data.data;
          this.pageTotal = this.tableData.length;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("请求出错，请联系管理员");
          this.pageTotal = 0;
        });
    },

    // 删除红色按钮
    handleDelete(index, row) {
      // 二次确认删除
      console.log(row.id);
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          // this.tableData.splice(index, 1);
          /*删除成功后请求数据*/
          this.$axios
            .get(
              // "http://172.16.6.136:8080/gold/vipType/delete",
              this.$api.cardManage.cardManagedelete,
              {
                params: {
                  id: row.id
                }
              }
            )
            .then(res => {
              console.log(res.data.data);
              console.log(res);
              console.log(res.data);
              this.$message.success("删除成功");
              this.getData();
              // this.tableData = res.data.data.list;
            })
            .catch(err => {
              console.log(err);
              this.$message.err("删除失败");
            });
        })
        .catch(() => {});
    },

    /*编辑操作*/
    handleEdit(index, row) {
      this.idx = index;
      this.form = row;
      this.editVisible = true;
      this.editForm = Object.assign({}, row); // 重置对象
      _index = index;
      console.log("index的值：" + index);
      console.log("_index的值：" + _index);
      console.log("row的值是：", this.editForm); // 代表选择的这一行的数据
    },
    /*保存编辑*/
    saveEdit() {
      this.editVisible = false;
      /*保存编辑后请求数据*/
      this.$axios
        .post(
          // "http://172.16.6.136:8080/gold/vipType/update",
          this.$api.cardManage.cardManageupdate,
          this.editForm,
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          console.log(res.data.data.list);
          this.$message.success("修改成功");
          this.getData();
          // this.tableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
      this.$set(this.tableData, this.idx, this.editForm);
    },

    //添加操作
    handleAdd() {
      this.addVisible = true;
      this.addForm = {
        id: "",
        type: "",
        score: ""
      };
    },

    //保存添加
    saveAdd() {
      console.log(this.addForm);
      this.addVisible = false;

      /*保存添加并请求数据*/
      this.$axios
        .post(
          // "http://172.16.6.136:8080/gold/vipType/insert",
          this.$api.cardManage.cardManageinsert,
          this.addForm,
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data.data.list);
          console.log(res.data.data);
          this.$message.success(`添加成功`);
          this.getData();
        })
        .catch(err => {
          console.log(err);
          this.$message.err("添加失败");
        });
      // this.$set(this.tableData, this.idx+1, this.addForm);
    },

    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageNum", val);
      this.getData();
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.dropDown {
  margin-right: 10px;
}
.handle-select {
  width: 120px;
}

.handle-input {
  margin-right: 0;
  width: 300px;
  display: inline-block;
}
.optionMenu {
  width: 260px;
  float: left;
  margin-right: 10px;
}
.searchComponents {
  height: 30px;
  width: 300px;
  float: right;
}
.search-input {
  position: relative;
  right: 10px;
}
.search-input,
.handle-input,
.selectSearch {
  float: right;
}
.selectSearch {
  width: 120px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.green {
  color: green;
  margin-right: 5px;
}
.addCompany {
  margin-right: 10px;
  margin-top: 4px;
}
.blue {
  color: dodgerblue;
  margin-right: 5px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.page {
  float: right;
  margin: 10px 0;
}
</style>
